<template>
  <div class="content bg">
    <div class="module-box">
      <div style="flex:0 1 33.3%">
        <!-- <dv-border-box-10 class="panel_box" > -->
          <h2>柱形图-拣货排名</h2>
          <div class="box-size" id="container">
          </div>
        <!-- </dv-border-box-10> -->
      </div>
      <div style="flex:0 1 33.3%">
        <!-- <dv-border-box-10 class="panel_box" > -->
          <h2>调度</h2>
          <div class="box-size" id="containerBill">
          </div>
        <!-- </dv-border-box-10> -->
      </div>
      <!-- <div style="flex:0 1 33.33%">
        <h2>柱形图-拣货排名</h2>
        <dv-border-box-8 class="box-size">
          
          <dv-scroll-ranking-board :config="config" />
        </dv-border-box-8>
      </div> -->
      
    </div>
    <div class="module-box">
      <div style="flex:0 1 33.33%">
        <h2>调度</h2>
        <!-- <dv-border-box-10 class="box-size"> -->
          <dv-active-ring-chart :config="configDU" class="box-size"/>
        <!-- </dv-border-box-10> -->
      </div>
    </div>
  </div> 
</template>
<script>
//先导入charts
import Charts from '@jiaminghi/charts'
export default {
  
  data () {
    return {
      config:{
        data: [
          {
            name: 'A',
            value: 200
          },
          {
            name: 'B',
            value: 300
          },
          {
            name: 'C',
            value: 300
          },
          {
            name: 'D',
            value: 1500
          },
          {
            name: 'E',
            value: 1200
          },
          {
            name: 'F',
            value: 900
          }
        ],
        unit: '单位',
        valueFormatter ({ value }) {
          console.warn(arguments)
          const reverseNumber = (value + '').split('').reverse()
          let valueStr = ''

          while (reverseNumber.length) {
            const seg = reverseNumber.splice(0, 3).join('')
            valueStr += seg
            if (seg.length === 3) valueStr += ','
          }

          return valueStr.split('').reverse().join('')
        }
      },
      configDU:{
        data: [
        {
          name: '已调度',
          value: 315
        },
        {
          name: '未调度',
          value: 17
        },
       ],
      showOriginValue: true,
      color:["#1F4DF4","#C99262"],
      lineWidth:50
      }
    };
  },
  created(){
  },
  mounted(){
  //在mouted里面做了一个立即执行函数 ，防止里面的变量污染
    (function(){

      const containerBill = document.getElementById('containerBill')
      const myChartBill = new Charts(containerBill)
      var optionBill = {
        title: {
          text: '',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 315, name: '已调度' },
              { value: 17, name: '未调度' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChartBill.setOption(optionBill)
    //下面和eacharts差不多
      const container =document.getElementById('container')

        const myChart = new Charts(container)
          var option={
              color:['#2f89cf'],
              grid:{
                  top:'0px'
              },
              // 这是控制标题的
              title: {
                text: '2222',
                show:true,
                offset:[0,-20],//标题位置偏移
                style:{ //标题默认样式
                  fill: '#fff',
                  fontSize: 17,
                  fontWeight: '400',
                  textAlign: 'center',
                  textBaseline: 'bottom'
                },
              },
              //legend为图表提供图例标签功能，它允许用户隐藏/显示series中的某个子图表。
              // legend:{
              //     show:true,
              //     orient:'horizontal' | 'vertical',
              //     left:'50%'//图例标签左边距
              // },
              xAxis: {
                name: '人员',
                data: ["A","B", "C", "D", "E", "F"],
                nameTextStyle: {
                  fill: '#fff',
                  fontSize: 10
                },
                axisLabel:{
                  style: {
                    fill: '#fff',
                    fontSize: 10,
                    rotate: 0
                  }
                },
                 axisLine:{
                  style: {
                      stroke: '#fff',
                      lineWidth: 1
                    }
                }

              },
              yAxis: {
                data: 'value',
                max:'0%',
                axisLabel:{
                  style: {
                    fill: '#fff',
                    fontSize: 10,
                    rotate: 0
                  }
                },
                axisLine:{
                  style: {
                      stroke: '#fff',
                      lineWidth: 1
                    }
                },
                splitLine:{
                  style: {
                    color: '#fff',
                    lineWidth: 1
                  }
                }
              },
              series: [
                {
                  data: [200, 300, 300, 900, 1500, 1200],
                  type: 'bar',
                  barWidth:'50%',
                  
                  label: {
                      show: true,		//开启显示
                      position: 'top',	//在上方显示
                      textStyle: {	    //数值样式
                          color: 'white',
                          fontSize: 16
                      }
                  }
                }
              ]
          }

        myChart.setOption(option)
        //图表自适应
        window.addEventListener("resize", function() {
        myChart.resize();
      });

    })()
  },
  methods:{

  
  
  }
}
</script>
<style scoped >

  h2{
    height: 48px;
    color: white;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    line-height: 48px;
  }
</style>
